import streamlit as st
from datetime import datetime
import re

# 设置页面配置
st.set_page_config(
    page_title="教育用户注册平台",
    page_icon="🎓",
    layout="wide"
)

# 自定义CSS样式
st.markdown("""
<style>
    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
    
    :root {
        --primary-color: #4a6fa5;
        --secondary-color: #6c757d;
        --success-color: #28a745;
        --danger-color: #dc3545;
        --warning-color: #ffc107;
        --light-color: #f8f9fa;
        --dark-color: #343a40;
        --background-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }
    
    body {
        font-family: 'Poppins', sans-serif;
        background-color: #f0f2f6;
    }
    
    .main {
        max-width: 900px;
        margin: 0 auto;
    }
    
    .header {
        text-align: center;
        padding: 2rem 0;
        margin-bottom: 2rem;
        background: var(--background-gradient);
        border-radius: 15px;
        color: white;
        box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    }
    
    .header h1 {
        font-size: 2.5rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
    }
    
    .header p {
        font-size: 1.1rem;
        opacity: 0.9;
        margin-bottom: 0;
    }
    
    .form-container {
        background: white;
        padding: 2.5rem;
        border-radius: 15px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    }
    
    .form-group {
        margin-bottom: 1.5rem;
    }
    
    .stTextInput > label,
    .stNumberInput > label,
    .stSelectbox > label,
    .stDateInput > label {
        font-weight: 600;
        color: var(--dark-color);
        margin-bottom: 0.5rem;
        display: block;
    }
    
    .stTextInput > div > div,
    .stNumberInput > div > div,
    .stSelectbox > div > div,
    .stDateInput > div {
        border-radius: 8px;
        border: 1px solid #ddd;
        transition: all 0.3s ease;
    }
    
    .stTextInput > div > div:focus-within,
    .stNumberInput > div > div:focus-within,
    .stSelectbox > div > div:focus-within,
    .stDateInput > div:focus-within {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 3px rgba(74, 111, 165, 0.1);
    }
    
    .btn-primary {
        background-color: var(--primary-color);
        color: white;
        border: none;
        padding: 0.75rem 2rem;
        font-size: 1rem;
        font-weight: 600;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.3s ease;
        width: 100%;
        margin-top: 1rem;
    }
    
    .btn-primary:hover {
        background-color: #3a5b8f;
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(74, 111, 165, 0.3);
    }
    
    .success-message {
        background-color: rgba(40, 167, 69, 0.1);
        color: var(--success-color);
        padding: 1rem;
        border-radius: 8px;
        border-left: 4px solid var(--success-color);
        margin-top: 1.5rem;
    }
    
    .error-message {
        color: var(--danger-color);
        font-size: 0.875rem;
        margin-top: 0.25rem;
    }
    
    .info-card {
        background-color: rgba(74, 111, 165, 0.05);
        border-radius: 10px;
        padding: 1.5rem;
        margin-top: 2rem;
        border-left: 4px solid var(--primary-color);
    }
    
    .info-card h3 {
        color: var(--primary-color);
        margin-top: 0;
        margin-bottom: 1rem;
    }
    
    .info-card ul {
        margin: 0;
        padding-left: 1.5rem;
    }
    
    .info-card li {
        margin-bottom: 0.5rem;
    }
    
    .two-columns {
        display: flex;
        gap: 1.5rem;
        margin-bottom: 1.5rem;
    }
    
    .column {
        flex: 1;
    }
    
    @media (max-width: 768px) {
        .two-columns {
            flex-direction: column;
        }
    }
</style>
""", unsafe_allow_html=True)

# 主页面内容
st.markdown('<div class="main">', unsafe_allow_html=True)

# 标题部分
st.markdown("""
<div class="header">
    <h1>🎓 教育用户注册平台</h1>
    <p>创建您的账户，开始学习之旅</p>
</div>
""", unsafe_allow_html=True)

# 表单容器
st.markdown('<div class="form-container">', unsafe_allow_html=True)

# 表单处理
with st.form(key='registration_form'):
    # 用户名和密码
    st.subheader("账户信息")
    
    # 用户名
    username = st.text_input("用户名", placeholder="请输入您的用户名")
    
    # 密码
    password = st.text_input("密码", type="password", placeholder="请输入您的密码")
    confirm_password = st.text_input("确认密码", type="password", placeholder="请再次输入您的密码")
    
    # 个人信息 - 两列布局
    st.subheader("个人信息")
    col1, col2 = st.columns(2)
    
    with col1:
        # 年龄
        age = st.number_input("年龄", min_value=1, max_value=120, step=1, format="%d")
        
        # 性别
        gender = st.selectbox("性别", options=["请选择", "男", "女", "其他"])
    
    with col2:
        # 出生日期
        birth_date = st.date_input("出生日期", max_value=datetime.now())
        
        # 身高
        height = st.number_input("身高 (cm)", min_value=50, max_value=250, step=1, format="%d")
    
    # 额外信息
    st.subheader("教育信息")
    education_level = st.selectbox(
        "教育程度", 
        options=["请选择", "小学", "初中", "高中", "专科", "本科", "硕士", "博士"]
    )
    
    interests = st.multiselect(
        "兴趣领域",
        options=["数学", "物理", "化学", "生物", "历史", "地理", "语文", "英语", 
                "计算机科学", "艺术", "音乐", "体育", "其他"]
    )
    
    # 提交按钮
    submit_button = st.form_submit_button("注册", use_container_width=True)
    
    # 表单验证和提交处理
    if submit_button:
        # 验证标志
        valid = True
        errors = []
        
        # 验证用户名
        if not username or len(username) < 3:
            valid = False
            errors.append("用户名至少需要3个字符")
        
        # 验证密码
        if not password:
            valid = False
            errors.append("请输入密码")
        elif len(password) < 8:
            valid = False
            errors.append("密码长度至少需要8个字符")
        elif not re.search(r"[A-Za-z]", password) or not re.search(r"[0-9]", password):
            valid = False
            errors.append("密码必须包含字母和数字")
        
        # 验证密码一致性
        if password != confirm_password:
            valid = False
            errors.append("两次输入的密码不一致")
        
        # 验证性别
        if gender == "请选择":
            valid = False
            errors.append("请选择性别")
        
        # 验证教育程度
        if education_level == "请选择":
            valid = False
            errors.append("请选择教育程度")
        
        # 显示错误信息
        if not valid:
            st.error("注册失败，请修正以下问题：")
            for error in errors:
                st.markdown(f"<div class='error-message'>• {error}</div>", unsafe_allow_html=True)
        else:
            # 计算年龄验证（可选）
            today = datetime.now().date()
            calculated_age = today.year - birth_date.year - ((today.month, today.day) < (birth_date.month, birth_date.day))
            
            if abs(calculated_age - age) > 1:
                st.warning(f"根据出生日期，您的年龄应该是 {calculated_age} 岁，但您输入的是 {age} 岁。")
            
            # 显示成功信息
            st.markdown("""
            <div class="success-message">
                <h4>✅ 注册成功！</h4>
                <p>感谢您注册我们的教育平台。我们将尽快处理您的注册信息。</p>
            </div>
            """, unsafe_allow_html=True)
            
            # 显示注册信息摘要（可选，通常不会在实际应用中显示密码）
            with st.expander("查看注册信息摘要"):
                st.write(f"用户名: {username}")
                st.write(f"年龄: {age}")
                st.write(f"性别: {gender}")
                st.write(f"出生日期: {birth_date}")
                st.write(f"身高: {height} cm")
                st.write(f"教育程度: {education_level}")
                st.write(f"兴趣领域: {', '.join(interests) if interests else '未选择'}")

st.markdown('</div>', unsafe_allow_html=True)  # 关闭表单容器

# 信息卡片
st.markdown("""
<div class="info-card">
    <h3>📚 关于我们的平台</h3>
    <ul>
        <li>提供高质量的在线教育资源和课程</li>
        <li>个性化学习路径和推荐系统</li>
        <li>专业的教师团队和学习支持</li>
        <li>互动社区，与其他学习者交流分享</li>
        <li>灵活的学习时间和进度安排</li>
    </ul>
</div>
""", unsafe_allow_html=True)

st.markdown('</div>', unsafe_allow_html=True)  # 关闭主容器

# 页脚
st.markdown("""
---
<div style='text-align: center; color: var(--secondary-color); font-size: 0.9rem; margin-top: 2rem;'>
    © 2024 教育用户注册平台 | 版权所有
</div>
""", unsafe_allow_html=True)